<template>
	<view class="um-media" :style="styles">
		<view class="um-media-cover">
			<um-image :width="coverProps.width" :height="coverProps.height" :mode="coverProps.mode" :src="cover"></um-image>
		</view>
		<view class="um-media-body" :style="{ paddingLeft: direction === 'horizontal' ? '24rpx' : 0 }">
			<slot></slot>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

const props = withDefaults(
	defineProps<{
		cover?: string;
		direction?: string;
		coverProps?: any;
		radius?: string;
		customStyle?: any;
	}>(),
	{
		direction: 'horizontal',
		coverProps: {
			width: '200rpx'
		}
	}
);

const styles = computed(() => {
	return {
		flexDirection: props.direction === 'horizontal' ? 'row' : 'column',
		...props.customStyle
	};
});
</script>

<style lang="scss" scoped>
.um-media {
	display: flex;
	background-color: #fff;
	padding: 24rpx;
}

.um-media-body {
	flex: 1;
	padding-left: 24rpx;
	box-sizing: border-box;
}
</style>
